<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>系统推荐选课</title>
<style>
	body {
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		padding: 20px;
		min-height: 100vh;
		margin: 0;
	}
	
	.header {
		background: linear-gradient(135deg, #667eea, #764ba2);
		color: white;
		padding: 25px;
		text-align: center;
		border-radius: 15px;
		margin-bottom: 25px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}
	
	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
	}
	
	.section {
		background: white;
		border-radius: 15px;
		padding: 25px;
		margin-bottom: 25px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	}
	
	.section h3 {
		color: #333;
		border-bottom: 2px solid #4CAF50;
		padding-bottom: 10px;
		margin-top: 0;
	}
	
	.requirements-title {
		font-size: 18px;
		font-weight: bold;
		color: #2c3e50;
		margin-bottom: 15px;
	}
	
	.requirements-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 15px;
	}
	
	.requirement-item {
		background: #f8f9fa;
		padding: 15px;
		border-radius: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}
	
	.requirement-label {
		font-weight: 600;
		color: #2c3e50;
	}
	
	.requirement-value {
		float: right;
		color: #4CAF50;
		font-weight: bold;
	}
	
	.progress-bar {
		height: 20px;
		background-color: #ddd;
		border-radius: 10px;
		margin-top: 5px;
		overflow: hidden;
	}
	
	.progress-fill {
		height: 100%;
		background: linear-gradient(135deg, #667eea, #764ba2);
		text-align: center;
		line-height: 20px;
		color: white;
		font-size: 12px;
	}
	
	.reason {
		color: #667eea;
		font-style: italic;
		margin-top: 10px;
		padding: 12px;
		background: #f8f9fa;
		border-radius: 8px;
		border-left: 4px solid #667eea;
	}
	
	.preference-form {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 15px;
	}
	
	.preference-item {
		display: flex;
		flex-direction: column;
	}
	
	.preference-item label {
		font-weight: bold;
		margin-bottom: 5px;
		color: #555;
	}
	
	.preference-item select {
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		background-color: white;
	}
	
	.btn {
		display: inline-block;
		padding: 12px 25px;
		background: linear-gradient(135deg, #667eea, #764ba2);
		color: white;
		text-decoration: none;
		border-radius: 8px;
		border: none;
		cursor: pointer;
		font-size: 14px;
		font-weight: 600;
		transition: all 0.3s ease;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}
	
	.btn:hover {
		background: linear-gradient(135deg, #764ba2, #667eea);
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	}
	
	.course-card {
		border: 1px solid #eaeaea;
		border-radius: 12px;
		padding: 20px;
		margin-bottom: 20px;
		background: #f8f9fa;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	}
	
	.course-title {
		font-size: 18px;
		font-weight: bold;
		color: #2c3e50;
		margin-bottom: 15px;
	}
	
	.course-info {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 10px;
	}
	
	.course-info-item {
		display: flex;
		justify-content: space-between;
		padding: 5px 0;
		border-bottom: 1px dashed #eee;
	}
	
	.course-info-label {
		font-weight: bold;
		color: #555;
	}
	
	.no-courses {
		text-align: center;
		padding: 40px;
		color: #7f8c8d;
	}
	
	.message {
		padding: 15px;
		margin: 15px 0;
		border-radius: 8px;
		text-align: center;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	}
	
	.error {
		background: #ffebee;
		color: #c62828;
		border: 1px solid #ffcdd2;
	}
	
	.success {
		background: #e8f5e9;
		color: #2e7d32;
		border: 1px solid #c8e6c9;
	}
	
	.back-btn {
		display: block;
		text-align: center;
		margin-top: 25px;
	}

	.back-btn {
		display: block;
		text-align: center;
		margin-top: 30px;
	}

	.back-btn a {
		display: inline-block;
		padding: 12px 25px;
		background: linear-gradient(135deg, #95a5a6, #7f8c8d);
		color: white;
		border-radius: 8px;
		text-decoration: none;
		transition: all 0.3s ease;
		font-weight: 600;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}

	.back-btn a:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
		text-decoration: none;
		color: white;
	}
</style>
</head>
<body>
	<div class="header">
		<h2>系统推荐选课 - 当前校区: ${not empty param.campus ? param.campus : '未选择'}</h2>
	</div>
	
	<div class="container">
		<!-- 显示选课结果消息 -->
		<div id="messageContainer">
			<c:if test="${not empty message}">
				<div class="message ${message.contains('成功') ? 'success' : 'error'}">
					${message}
				</div>
				<%-- 清除消息属性，避免重复显示 --%>
				<c:set var="message" value="" scope="session"/>
			</c:if>
		</div>
		
		<div class="section requirements">
			<div class="requirements-title">选课要求</div>
			<div>每类课程需修满2学分，总计修满8学分即可毕业</div>
			
			<c:if test="${not empty progressReport}">
				<%-- 显示动态进度报告 --%>
				<div class="requirements-list">
					<c:forEach var="entry" items="${progressReport.categoryCredits}">
						<div class="requirement-item">
							<span class="requirement-label">${entry.key}类:</span>
							<span class="requirement-value">已修${entry.value}/2学分</span>
							<div class="progress-bar">
								<div class="progress-fill" style="width: ${entry.value ge 2 ? 100 : entry.value * 50}%">${entry.value ge 2 ? 100 : entry.value * 50}%</div>
							</div>
						</div>
					</c:forEach>
					<div class="requirement-item">
						<span class="requirement-label">总学分:</span>
						<span class="requirement-value">已修${progressReport.totalCredits}/8学分</span>
						<div class="progress-bar">
							<div class="progress-fill" style="width: ${progressReport.totalCredits ge 8 ? 100 : progressReport.totalCredits * 12.5}%">${progressReport.totalCredits ge 8 ? 100 : progressReport.totalCredits * 12.5}%</div>
						</div>
					</div>
				</div>
			</c:if>
		</div>
		
		<div class="section">
			<h3>个人偏好设置</h3>
			<form action="${pageContext.request.contextPath}/RecommendCourse_Servlet" method="post">
				<input type="hidden" name="campus" value="${not empty param.campus ? param.campus : ''}">
				<div class="preference-form">
					<div class="preference-item">
						<label for="interest">兴趣方向:</label>
						<select id="interest" name="interest">
							<option value="">不限</option>
							<option value="技术" ${param.interest == '技术' ? 'selected' : ''}>技术类</option>
							<option value="管理" ${param.interest == '管理' ? 'selected' : ''}>管理类</option>
							<option value="艺术" ${param.interest == '艺术' ? 'selected' : ''}>艺术类</option>
							<option value="语言" ${param.interest == '语言' ? 'selected' : ''}>语言类</option>
							<option value="科学" ${param.interest == '科学' ? 'selected' : ''}>科学类</option>
						</select>
					</div>
					
					<div class="preference-item">
						<label for="career">职业规划:</label>
						<select id="career" name="career">
							<option value="">不限</option>
							<option value="工程师" ${param.career == '工程师' ? 'selected' : ''}>工程技术</option>
							<option value="管理者" ${param.career == '管理者' ? 'selected' : ''}>管理岗位</option>
							<option value="设计师" ${param.career == '设计师' ? 'selected' : ''}>设计创意</option>
							<option value="研究员" ${param.career == '研究员' ? 'selected' : ''}>科学研究</option>
							<option value="教育者" ${param.career == '教育者' ? 'selected' : ''}>教育培训</option>
						</select>
					</div>
					
					<div class="preference-item">
						<label for="courseType">课程类型偏好:</label>
						<select id="courseType" name="courseType">
							<option value="">不限</option>
							<option value="线上" ${param.courseType == '线上' ? 'selected' : ''}>线上课程</option>
							<option value="线下" ${param.courseType == '线下' ? 'selected' : ''}>线下课程</option>
						</select>
					</div>
					
					<div class="preference-item">
						<label for="creditLoad">期望学分负荷:</label>
						<select id="creditLoad" name="creditLoad">
							<option value="">不限</option>
							<option value="低" ${param.creditLoad == '低' ? 'selected' : ''}>低负荷(1-3学分)</option>
							<option value="中" ${param.creditLoad == '中' ? 'selected' : ''}>中等负荷(4-6学分)</option>
							<option value="高" ${param.creditLoad == '高' ? 'selected' : ''}>高负荷(7+学分)</option>
						</select>
					</div>
				</div>
				
				<div style="text-align: center; margin-top: 20px;">
					<input type="submit" class="btn" value="获取推荐课程">
				</div>
			</form>
		</div>
		
		<div class="section recommendations">
			<h3>推荐课程</h3>
			<div>
				<c:choose>
					<c:when test="${not empty recommendedCourses}">
						<div class="recommendation-list">
							<c:forEach items="${recommendedCourses}" var="course">
								<div class="course-card">
									<div class="course-title">${course.name} (${course.category})</div>
									<div class="course-info">
										<div class="course-info-item">
											<span class="course-info-label">课程编号:</span>
											<span>${course.no}</span>
										</div>
										<div class="course-info-item">
											<span class="course-info-label">授课教师:</span>
											<span>${course.teacher}</span>
										</div>
										<div class="course-info-item">
											<span class="course-info-label">学分:</span>
											<span>${course.credit}</span>
										</div>
										<div class="course-info-item">
											<span class="course-info-label">上课时间:</span>
											<span>${course.time}</span>
										</div>
										<div class="course-info-item">
											<span class="course-info-label">上课地点:</span>
											<span>${course.place}</span>
										</div>
										<div class="course-info-item">
											<span class="course-info-label">课程类型:</span>
											<span>${course.courseType}</span>
										</div>
										<div class="course-info-item">
											<span class="course-info-label">校区:</span>
											<span>${course.campus}</span>
										</div>
										<div class="course-info-item">
											<span class="course-info-label">课程分类:</span>
											<span>${course.courseClassification}</span>
										</div>
									</div>
									
									<c:choose>
										<c:when test="${not empty recommendationReasons}">
											<div class="reason">
												<span class="course-info-label">推荐理由:</span>
												<span>${recommendationReasons[course.no]}</span>
											</div>
										</c:when>
										<c:otherwise>
											<div class="reason">
												<span class="course-info-label">推荐理由:</span>
												<span>根据您的个人偏好和课程要求推荐此课程</span>
											</div>
										</c:otherwise>
									</c:choose>
									
									<div style="margin-top: 15px; text-align: right;">
										<button class="btn elect-btn" data-course-no="${course.no}" data-campus="${not empty param.campus ? param.campus : ''}">选择此课程</button>
									</div>
								</div>
							</c:forEach>
						</div>
					</c:when>
					<c:when test="${param.interest != null || param.career != null || param.courseType != null || param.creditLoad != null}">
						<div class="no-courses">
							<p>暂无符合您当前偏好的推荐课程</p>
							<p>请尝试调整偏好设置后重新获取推荐</p>
						</div>
					</c:when>
					<c:otherwise>
						<div class="no-courses">
							<p>请设置个人偏好并点击"获取推荐课程"按钮</p>
						</div>
					</c:otherwise>
				</c:choose>
			</div>
		</div>
		
		<div class="section">
			<h3>培养方案进度</h3>
			<div class="course-info">
				<div class="course-info-item">
					<span class="course-info-label">总需学分:</span>
					<span>120学分</span>
				</div>
				<c:choose>
					<c:when test="${not empty progressReport}">
						<div class="course-info-item">
							<span class="course-info-label">已修学分:</span>
							<span>${progressReport.totalCredits}学分</span>
						</div>
						<div class="course-info-item">
							<span class="course-info-label">GPA:</span>
							<span><fmt:formatNumber value="${progressReport.gpa}" pattern="#0.00"/></span>
						</div>
						<div class="course-info-item">
							<span class="course-info-label">剩余学分:</span>
							<span>${120 - progressReport.totalCredits}学分</span>
						</div>
					</c:when>

				</c:choose>
			</div>
		</div>
		
		<div class="back-btn">
			<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
		</div>
	</div>
	
	<script>
		// 添加选课事件监听
		document.addEventListener('DOMContentLoaded', function() {
			const electButtons = document.querySelectorAll('.elect-btn');
			
			electButtons.forEach(button => {
				button.addEventListener('click', function() {
					const courseNo = this.getAttribute('data-course-no');
					const campus = this.getAttribute('data-campus');
					const buttonElement = this; // 保存按钮元素引用
					
					// 禁用按钮并显示加载状态
					buttonElement.disabled = true;
					buttonElement.textContent = '选课中...';
					
					// 发送选课请求到RecommendCourse_Servlet
					fetch('${pageContext.request.contextPath}/RecommendCourse_Servlet?id=elect&No=' + encodeURIComponent(courseNo) + '&campus=' + encodeURIComponent(campus))
						.then(response => response.text())
						.then(data => {
							// 显示选课结果消息
							const messageContainer = document.getElementById('messageContainer');
							if (data.includes('成功')) {
								messageContainer.innerHTML = '<div class="message success">' + data + '</div>';
								// 选课成功，更新按钮文本但不禁用，允许继续选其他课程
								buttonElement.textContent = '已选课';
							} else {
								messageContainer.innerHTML = '<div class="message error">' + data + '</div>';
								// 选课失败，恢复按钮状态以便用户可以重试
								buttonElement.disabled = false;
								buttonElement.textContent = '选择此课程';
							}
							
							// 滚动到消息区域
							messageContainer.scrollIntoView({ behavior: 'smooth' });
						})
						.catch(error => {
							console.error('Error:', error);
							const messageContainer = document.getElementById('messageContainer');
							messageContainer.innerHTML = '<div class="message error">选课请求失败，请稍后重试</div>';
							messageContainer.scrollIntoView({ behavior: 'smooth' });
							
							// 请求失败，恢复按钮状态以便用户可以重试
							buttonElement.disabled = false;
							buttonElement.textContent = '选择此课程';
						});
				});
			});
		});
	</script>
</body>
</html>